<template>
  <div class="main">
    <div class="nav">
      <tool-bar :pageQuery="pageQuery" @fetchData="handleFetchData"></tool-bar>
    </div>
    <div class="content">
      <indicator-system-table
        :tableData="tableData"
        :pageQuery.sync="pageQuery"
        :loading="tableLoading"
        @fetchData="fetchData"
      ></indicator-system-table>
    </div>
  </div>
</template>

<script>
import toolBar from './components/toolBar'
import indicatorSystemTable from './components/indicatorSystemTable'
import { queryQuotaList } from '@api/indicator-manage'
import { queryBaseIndexList } from '@api/city-index'
export default {
  components: {
    toolBar,
    indicatorSystemTable,
  },
  data() {
    return {
      tableData: [],
      pageQuery: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        // name: null,
        // areaId: null,
        // year: null,
        // status: null,
      },
      tableLoading: true,
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleFetchData() {
      this.fetchData()
    },
    fetchData() {
      this.tableLoading = true
      queryBaseIndexList(this.pageQuery).then((res) => {
        if (res.success) {
          this.tableData = res.data.list
          this.pageQuery.total = res.data.count
          this.tableLoading = false
        }
      })
      // queryQuotaList(this.pageQuery).then((res) => {
      //   if (res.success) {
      //     this.tableData = res.data.records;
      //     this.pageQuery.total = res.data.total;
      //     this.tableLoading = false;
      //   }
      // });
    },
    handlePageQuery(val) {
      this.pageQuery = val
    },
  },
  computed: {
    listenPageQuery() {
      const { pageSize, pageIndex, indexName, areaId, year, status } =
        this.pageQuery
      return { pageSize, pageIndex, indexName, areaId, year, status }
    },
  },
  watch: {
    // pageQuery: {
    //   handler: function(newVal, oldVal) {
    //     if (newVal.pageIndex !== 1 && newVal.pageIndex === oldVal.pageIndex) {
    //       this.pageQuery.pageIndex = 1;
    //     } else {
    //       this.fetchData();
    //     }
    //   },
    //   deep: true,
    // },
    // 监听除了total的pageQuery
    listenPageQuery: {
      handler: function (newVal, oldVal) {
        if (newVal.pageIndex !== 1 && newVal.pageIndex === oldVal.pageIndex) {
          this.pageQuery.pageIndex = 1
        } else {
          this.fetchData()
        }
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped>
// .table-container {
//   width: 100%;
//   height: calc(100% - 130px);
//   background-color: #f4f8fe;
//   // padding: 26px 169px 30px 169px;
// }
.main {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background-color: #f4f8fe;
  padding: 20px;
}
.nav {
}
.content {
  width: 100%;
  height: 100%;
  // position: absolute;
  // top: 130px;
  // left: 0;
  // bottom: 30px;
}
</style>
